<template>
  <div id="confirm">
    <div class="order">
      <h6>商品清单</h6>
      <div class="ul">
        <div class="sp">
          <div class="left">
            <img src="../../assets/del2.png" alt="">
            <div class="txt">
              <h4>南极人睡衣女冬季法兰绒加厚</h4>
              <p>￥89.00</p>
            </div>
          </div>
        </div>
        <div class="sp">
          <div class="left">
            <img src="../../assets/del1.png" alt="">
            <div class="txt">
              <h4>杜蕾斯 避孕套 男用 安全套超薄尊享…</h4>
              <p>￥59.00</p>
            </div>
          </div>
        </div>
        <div class="sp">
          <div class="left">
            <img src="../../assets/del3.png" alt="">
            <div class="txt">
              <h4>护理型牙刷（深洁型）2支装 一万…</h4>
              <p>￥46.80</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="quan" @click="isShowQuan">
      <h6>优惠券</h6>
      <div class="null">
        <p>暂无优惠劵可用</p>
        <img src="../../assets/youjiantou.png" alt="">
      </div>
    </div>
    <div class="money">
      <div>
        <span>商品总额</span>
        <p>￥194.80</p>
      </div>
      <div>
        <span>商品总额</span>
        <p>￥194.80</p>
      </div>
      <div>
        <span>商品总额</span>
        <p>￥194.80</p>
      </div>
    </div>
    <div class="bottom">
      <div class="left">￥194.80</div>
      <div class="right">
        <div>
          <img src="../../assets/weixinx.png" alt="">
          <p>微信支付</p>
        </div>
      </div>
    </div>
    <!-- 模态框 -->
    <div class="motai" v-if="isQuan">
      <div class="del">
        <div class="top">
          <p>已选商品</p>
          <span @click="isEnsure">确定</span>
        </div>
        <!-- 优惠券为空 -->
        <div class="img" v-if="false">
          <div>
            <img src="../../assets/youhuijuankong.png" alt="">
            <span>暂无可用优惠券</span>
          </div>
        </div>
        <!-- 优惠券 -->
        <div class="yhq">
          <div class="licc">
            <div class="imgc">
              <div class="tal">
                <img src="../../assets/del2.png" alt="">
                <div class="tt">
                  <h3>限杜蕾斯 避孕套 男用 安全套 超薄尊享三合一18只装</h3>
                  <div class="pp">
                    <div>
                      <div class="price">
                        <span>￥</span>20
                      </div>
                      <div class="man">满99可用</div>
                    </div>
                    <div class="im" @click="isChoose">
                      <img src="../../assets/xuanzhong.png" v-if="!isSure">
                      <img src="../../assets/weixuanhui.png" v-if="isSure">
                    </div>
                  </div>
                </div>
              </div>
              <div class="time">有效期：2018-12-21 ~2018-02-21</div>
            </div>
          </div>
          <div class="licc">
            <div class="imgc">
              <div class="tal">
                <img src="../../assets/del3.png" alt="">
                <div class="tt">
                  <h3>珞樱 情趣内衣民国古典旗袍学生装 长款 复古 制服诱惑情趣套装女</h3>
                  <div class="pp">
                    <div>
                      <div class="price">
                        <span></span>立即使用
                      </div>
                      <!-- <div class="man">满99可用</div> -->
                    </div>
                    <div class="im" @click="isChoose">
                      <img src="../../assets/xuanzhong.png" v-if="!isSure">
                      <img src="../../assets/weixuanhui.png" v-if="isSure">
                    </div>
                  </div>
                </div>
              </div>
              <div class="time">有效期：2018-12-21 ~2018-02-21</div>
            </div>
          </div>
          <div class="licc">
            <div class="imgc">
              <div class="tal">
                <img src="../../assets/del3.png" alt="">
                <div class="tt">
                  <h3>珞樱 情趣内衣民国古典旗袍学生装 长款 复古 制服诱惑情趣套装女</h3>
                  <div class="pp">
                    <div>
                      <div class="price">
                        <span></span>立即使用
                      </div>
                    </div>
                    <div class="im" @click="isChoose">
                      <img src="../../assets/xuanzhong.png" v-if="!isSure">
                      <img src="../../assets/weixuanhui.png" v-if="isSure">
                    </div>
                  </div>
                </div>
              </div>
              <div class="time">有效期：2018-12-21 ~2018-02-21</div>
            </div>
          </div>
          <div class="licc">
            <div class="imgc">
              <div class="tal">
                <img src="../../assets/del3.png" alt="">
                <div class="tt">
                  <h3>珞樱 情趣内衣民国古典旗袍学生装 长款 复古 制服诱惑情趣套装女</h3>
                  <div class="pp">
                    <div>
                      <div class="price">
                        <span></span>立即使用
                      </div>
                    </div>
                    <div class="im" @click="isChoose">
                      <img src="../../assets/xuanzhong.png" v-if="!isSure">
                      <img src="../../assets/weixuanhui.png" v-if="isSure">
                    </div>
                  </div>
                </div>
              </div>
              <div class="time">有效期：2018-12-21 ~2018-02-21</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Confirm',
  data () {
    return {
      isQuan: false,
      isSure: true
    }
  },
  methods: {
    isShowQuan () {
      this.isQuan = true
    },
    isEnsure () {
      this.isQuan = false
    },
    isChoose () {
      this.isSure = !this.isSure
    }
  },
  created () {
    document.title = '确认订单'
  }
}
</script>

<style lang='scss' scoped>
#confirm{
  width: 100%;
  height: 100%;
  position: relative;
  .order{
    background-color: #fff;
    h6{
      height: 13.06vw;
      line-height: 13.06vw;
      padding: 0 3.46vw;
      font-size: 3.73vw;
      font-family:SourceHanSansCN-Regular;
      font-weight:400;
      color:rgba(22,22,22,1);
    }
    .ul{
      .sp{
        height: 21.06vw;
        padding: 0 3.46vw;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left{
          display: flex;
          img{
            width: 13.06vw;
            height: 13.06vw;
            margin-right: 2vw;
          }
          .txt{
            margin-top: 1vw;
            h4{
              width: 78.66vw;
              font-size: 4.53vw;
              margin-bottom: 2.66vw;
              font-family:SourceHanSansCN-Bold;
              font-weight:bold;
              color:rgba(22,22,22,1);
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              height: 4.53vw;
            }
            p{
              font-size: 3.2vw;
              font-family:SourceHanSansCN-Regular;
              font-weight:400;
              color:rgba(255,0,0,1);
            }
          }
        }
      }
    }
  }
  .quan{
    background-color: #fff;
    margin-top: 4vw;
    h6{
      height: 13.06vw;
      line-height: 13.06vw;
      padding: 0 3.46vw;
      font-size: 3.73vw;
      font-family:SourceHanSansCN-Regular;
      font-weight:400;
      color:rgba(22,22,22,1);
    }
    .null{
      height: 14.66vw;
      padding: 0 3.46vw;
      display: flex;
      align-items: center;
      justify-content: space-between;
      p{
        font-size: 4.53vw;
        font-family:SourceHanSansCN-Bold;
        font-weight:bold;
        color:rgba(22,22,22,1);
      }
      img{
        width: 2.4vw;
      }
    }
  }
  .money{
    height: 22.93vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    margin-top: 4vw;
    margin-bottom: 14.66vw;
    div{
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      span{
        font-size: 3.73vw;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(134,134,134,1);
        margin-bottom: 4vw;
      }
      p{
        font-size: 4.53vw;
        font-family:SourceHanSansCN-Bold;
        font-weight:bold;
        color:rgba(22,22,22,1);
      }
    }
  }
  .bottom{
    width: 100%;
    height: 14.66vw;
    position: fixed;
    bottom: 0;
    display: flex;
    .left{
      width: 57.33vw;
      padding: 0 3.46vw;
      line-height: 14.66vw;
      background:rgba(255,255,255,1);
      font-size: 4.8vw;
      font-family:SourceHanSansCN-Bold;
      font-weight:bold;
      color:rgba(255,0,0,1);
    }
    .right{
      width: 42.66vw;
      background:rgba(0,167,32,1);
      display: flex;
      align-items: center;
      justify-content: center;
      div{
        display: flex;
        img{
          width: 5.6vw;
          height: 4.53vw;
          margin-right: 2.66vw;
        }
        p{
          font-size: 4.53vw;
          font-family:SourceHanSansCN-Bold;
          font-weight:bold;
          color:rgba(255,255,255,1);
        }
      }
    }
  }
  .motai{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background:rgba(0,0,0,0.5);
    z-index: 80;
    overflow-x: hidden;
    .del{
      height: 133.06vw;
      position: absolute;
      width: 100vw;
      bottom: 0;
      border-radius:16px 16px 0px 0px;
      background-color: #fff;
      border-radius: 2.13vw 2.13vw 0 0;
      .top{
        height: 14.66vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 3.46vw;
        border: 0.5px solid #eee;
        border-radius: 2.13vw 2.13vw 0 0;
        p{
          font-size: 3.73vw;
          font-family:SourceHanSansCN-Regular;
          font-weight:400;
          color:rgba(134,134,134,1);
          }
        span{
          font-size: 4.53vw;
          font-family:SourceHanSansCN-Regular;
          font-weight:400;
          color:rgba(10,109,255,1);
        }
      }
      .img{
        height: 118.4vw;
        display: flex;
        justify-content: center;
        align-items: center;
        div{
          display: flex;
          flex-direction: column;
          align-items: center;
          img{
            width: 24.66vw;
            height: 30.66vw;
          }
          span{
            font-size: 3.73vw;
            font-family:SourceHanSansCN-Regular;
            font-weight:400;
            color:rgba(134,134,134,1);
          }
        }
      }
      .yhq{
        height: 118.4vw;
        overflow-x: hidden;
        .licc{
          width: 93.06vw;
          height: 41.86vw;
          background-color: #f2f2f2;
          box-shadow:0px 2px 4vw 1.1vw rgba(0,0,0,0.06);
          margin-left: 3.46vw;
          margin-bottom: 4vw;
          &:nth-of-type(1){
            margin-top: 4vw;
          }
          .imgc{
            box-sizing: border-box;
            height: 41.86vw;
            background: url('../../assets/wdeyouhuijuanbj.png') no-repeat center center;
            background-size: 100% 100%;
            padding: 4vw;
            .tal{
              height: 20vw;
              display: flex;
              margin-bottom: 10.7vw;
              img{
                width: 20vw;
                height: 20vw;
                margin-right: 2vw;
              }
              .tt{
                h3{
                  width: 63.73vw;
                  font-size: 4vw;
                  font-family:SourceHanSansCN-Bold;
                  font-weight:bold;
                  color:rgba(22,22,22,1);
                  line-height: 5.33vw;
                  margin-bottom: 3vw;
                }
                .pp{
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  div{
                    display: flex;
                    align-items: center;
                    .price{
                      font-size: 5.6vw;
                      font-family:SourceHanSansCN-Bold;
                      font-weight:bold;
                      color:rgba(255,0,0,1);
                      line-height: 8.4vw;
                      margin-right: 2.66vw;
                      span{
                        font-size: 4.26vw;
                        font-family:SourceHanSansCN-Bold;
                        font-weight:bold;
                        color:rgba(255,0,0,1);
                        margin-top: 1vw;
                      }
                    }
                    .man{
                      width: 15.86vw;
                      height: 4.8vw;
                      background:rgba(255,245,245,1);
                      border-radius: 0.8vw;
                      font-size: 3.2vw;
                      text-align: center;
                      line-height: 4.8vw;
                      font-family:SourceHanSansCN-Regular;
                      font-weight:400;
                      color:rgba(255,0,0,1);
                    }
                  }
                  .im{
                    img{
                      width: 5.86vw;
                      height: 5.86vw;
                    }
                  }
                }
              }
            }
            .time{
              font-size: 2.93vw;
              font-family:SourceHanSansCN-Regular;
              font-weight:400;
              color:rgba(255,0,0,1);
            }
          }
        }
      }
    }
  }
}
</style>
